<template>
  <van-dialog
    v-model="isShow"
    title="请输入手机号查询移动积分"
    show-cancel-button
    @confirm="onConfirm"
    @cancel="onCancel"
    :showCancelButton="false"
    confirmButtonColor="#3E77FF"
    close-on-click-overlay
    @close="onCancel"
  >
    <div class="phoneInput">
      <van-field
        v-model="exPhone"
        placeholder="请输入手机号"
        type="number"
        maxlength="11"
        style="width: 200px"
        input-align="center"
      />
    </div>
  </van-dialog>
</template>

<script>
import { validatePhoneNumber } from "@/utils/common";
import { Toast } from "vant";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    show: {
      deep: true,
      handler: function (newVal) {
        this.isShow = newVal;
      },
    },
  },
  data() {
    return {
      isShow: false,
      exPhone: "",
    };
  },
  methods: {
    validatePhoneNumber,
    checkPhone(val) {
      const { status, msg } = this.validatePhoneNumber(val);
      if (!status) {
        Toast.fail({ message: `${msg}`, icon: "none" });
        return false;
      }
      return true;
    },
    onConfirm() {
      if (!this.checkPhone(this.exPhone)) {
        return;
      } else {
        this.$emit("confirm", this.exPhone);
        localStorage.removeItem("scoreDetail");
        localStorage.setItem(
          "scoreDetail",
          JSON.stringify({ phone: this.exPhone })
        );
      }
    },
    onCancel() {
      this.$emit("cancel");
    },
  },
};
</script>
<style lang="less" scoped>
.phoneInput {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  margin: 19px 0 34px;
}
.van-dialog {
  padding: 20px;
  &__header {
    font-weight: 500;
    font-size: 14px !important;
    color: #39394d !important;
  }
}
</style>
